<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>SPWN Playground</title>
  <meta content="SPWN Playground" property="og:title">
  <meta
    content="For testing and playing with SPWN on the web"
    property="og:description">
  <meta content="https://spu7nix.net/spwn" property="og:url">
  <meta content="https://spu7nix.net/spwn/assets/spwn_logo_large.png" property="og:image">
  <meta content="#72cf5f" data-react-helmet="true" name="theme-color">
  <link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism-tomorrow.css" rel="stylesheet" />
  <meta property="theme-color" content="#72cf5f">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="content">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <style type="text/css">
    body {
      margin: 2%;
      padding: 2%;
      background-color: #0c0d11;
      color: white;
      font-family: 'Source Code Pro', monospace;
      font-size: 25px;
      font-weight: 400;
    }


    .codejar-linenumbers {
      background-color: transparent;
    }

    #console {
      line-height: 20px;
      color: white;
      background: black;
      overflow-wrap: break-word;
      border-radius: 6px;

      padding: 10px;
      font-size: 20px;
      min-height: 100px;
      max-height: 500px;
      overflow-x: auto;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      word-wrap: break-word;

    }

    #code {
      border-radius: 6px;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);

      min-height: 100px;
      height: 340px;
      letter-spacing: normal;
      line-height: 40px;
      padding: 10px;
      tab-size: 4;
      background-color: #121318;
      color: white;
    }

    #bottom {
      width: 100%;
      overflow: hidden;
      text-align: center;
    }

    #logo {
      margin: 0px;
      padding: 0px;
      width: 30%;
      height: auto;
    }

    #levelstring {
      background-color: rgb(19, 24, 31);
      color: white;
      font-family: monospace;
      overflow-wrap: anywhere;
      padding: 10px;
      font-size: 20px;
      line-height: 25px;
      border-radius: 14px;
      max-height: 200px;
      overflow: auto;
    }

    #levelstringspoiler {
      background-color: rgb(40, 48, 59);
      border-radius: 0px 14px 0px 14px;
      float: left;
      
      border: solid rgba(255, 255, 255, 0.4) 2px;
      width: 30%;
      transition: all 0.1s ease-in-out 0s;
      min-height: 60px;
      line-height: 60px;
      font-size: 30px;
      text-align: center;
      transition: all 500ms linear;
    }

    #run_button {
      background: #551c1c;
      font-family: 'Source Code Pro', monospace;
      color: #ffffff;
      font-size: 40px;
      letter-spacing: 0em;
      font-weight: 400;
      padding: 3px 20px;
      border: solid rgba(255, 255, 255, 0.4) 2px;
      width: 30%;
      height: 60px;


      border-radius: 0px 14px 0px 14px;

      transition: all 0.1s ease-in-out 0s;
      float: right;
    }

    #run_button:hover {
      background: #101324;

      border-radius: 14px 0px 14px 0px;
      
      transition: all 0.1s ease-in-out 0s; 
    }

    ::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    ::-webkit-scrollbar-thumb {
      background: #425250;
      border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #966969;
    }

    ::-webkit-scrollbar-track {
      background: #1C2226;
      border-radius: 5px;
      box-shadow: inset 0px 0px 0px 0px #F0F0F0;
    }
  </style>
</head>

<body>

  

  <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.js"></script>

  <script src="https://spu7nix.net/spwn/prism-spwn.js"></script>
  <!-- https://spu7nix.net/spwn/prism-spwn.js -->

  <div id="code" class="language-spwn"></div>


  <pre id="console"></pre>




  <script src="ansi_up.js" type="text/javascript"></script>
  <div id="bottom">
    <details id="levelstringspoiler">
      <summary>level string</summary>
      <div id="levelstring"></div>
    </details>
    
    <img src="https://spu7nix.net/spwn/assets/spwn_logo_name_smol.png" alt="spwn logo" id="logo">
    
    <input type="button" value=">> build >>" id="run_button">
  </div>
  <script type="module">
    import {CodeJar} from 'https://medv.io/codejar/codejar.js'
      import {withLineNumbers} from 'https://medv.io/codejar/linenumbers.js'
      
      let jar = CodeJar(document.querySelector('#code'), withLineNumbers(Prism.highlightElement, {backgroundColor: "transparent", color: "rgba(255, 255, 255, 0.3)"}))

      jar.updateCode(
`
$.print("Hello SPWN!")

while_loop(() => true, () {
  10g.move(0, 20, 0.5)
  10g.move(20, 0, 0.5)
  10g.move(0, -20, 0.5)
  10g.move(-20, 0, 0.5)
})
`.trim()
      )

      import init, {run_spwn,init_panics} from "./pkg/spwn_web.js";
      init()
        .then(() => {
          init_panics();
          document.getElementById("run_button").addEventListener("click", run_code);
        });

      function run_code() {
        let code = jar.toString();
          
        let [txt, levelstring] = run_spwn(code)
        
        let ansi_up = new AnsiUp;

        let html = ansi_up.ansi_to_html(txt);

        let cdiv = document.getElementById("console");

        cdiv.innerHTML = html;

        let ls = document.getElementById("levelstring");

        if (levelstring.length > 0) {
          let container = document.getElementById("levelstringspoiler");
          container.style.color = '#943c3c';
          // change the background color back (with a delay equal to transition length)
          setTimeout(() => { container.style.color = 'white'; }, 500);
        }

        ls.innerHTML = levelstring;
      }
    </script>

</body>

</html>